<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>客服抢单</title>
    <link href="${pageContext.request.contextPath}/static/layui/css/layui.css" type="text/css" rel="stylesheet">
</head>
<body>
<form>
    <div class="demoTable">
        搜索：
        <div class="layui-inline">
            <input class="layui-input" name="staffName" id="staffName" autocomplete="off" placeholder="输入处理人">
        </div>
        <div class="layui-inline">
            <input class="layui-input" name="title" id="title" autocomplete="off" placeholder="请输入主题">
        </div>
        <select data-type="reload" id="state" name="state" lay-verify="required" autocomplete="off" class="layui-select">
            <option value="-1">请选择工单状态</option>
            <option value="0" >未分配</option>
            <option value="1" >等待客服回答</option>
            <option value="2" >客服已答复</option>
            <option value="3" >已完结</option>
        </select>
        <input type="hidden" name="isAllot" id="isAllot">
        <input type="hidden" name="isUreplay" id="isUreplay">
        <input type="hidden" name="isSreplay" id="isSreplay">
        <input type="hidden" name="isFinish" id="isFinish">
        <button class="layui-btn" data-type="reload" type="button">搜索</button>
    </div>
    <table id="order-from" lay-filter="test"></table>
</form>
<script src="${pageContext.request.contextPath}/static/js/jquery3.4.1.js"></script>
<script src="${pageContext.request.contextPath}/static/layer/layer.js"></script>
<script src="${pageContext.request.contextPath}/static/layui/layui.js"></script>
<script>
    //Demo
    layui.use('form', function(){
        var form = layui.form;
    });
</script>
<%--表单右侧工具栏--%>
<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="check">查看</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="upload">下载附件</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="delete">删除</a>
</script>
<script>
    layui.use('table', function(){

        var table = layui.table;
        let form = layui.form;
        //第一个实例
        table.render({
            elem: '#order-from'
            ,url: '${pageContext.request.contextPath}/order/getOrders.handler?userName=${userInfo.nickName}' //数据接口
            ,page: true //开启分页
            ,cols: [[ //表头
                {field: 'id', title: '编号', width:"10%", sort: true,templet:function (d) {
                        return d.id;
                    }},
                {field: 'createTime', title: '创建时间', width:"10%",sort:true,templet:function (d) {
                        return dateFormat("YY-mm--dd",new Date(d.createTime));
                    }},
                {field: 'nowTime',title:'最新时间',width: "10%",sort: true,templet:function (d) {
                        return dateFormat("YY-mm--dd",new Date(d.nowTime));
                    }},
                {field: 'title', title: '主题', width:"20%",templet:function (d) {
                        return d.title;
                    } },
                {field: 'userName', title: '处理人', width:"10%",templet:function (d) {
                        return d.staffId==null?"暂无":d.staff.nickName;
                    }},
                {field: 'state',title: '工单状态',width: "10%",templet:function (d) {
                        let isAllot = d.isAllot;
                        let isUreplay = d.isUreplay;
                        let isSreplay = d.isSreplay;
                        let isFinish = d.isFinish;
                        if(isAllot == 0){
                            return "未分配"
                        }else if(isFinish == 1 && isAllot == 1){
                            return "已完结"
                        }else if(isUreplay == 1 && isSreplay == 0){
                            return "等待客服答复"
                        }else if(isUreplay == 0 && isSreplay == 1){
                            return "客服已答复"
                        }
                    }},
                {field: 'ishaving', title: '有无上传附件', width:"10%",templet:function (d) {
                        return d.path != null?"有附件上传":"无附件上传";
                    }},
                {fixed: 'right',title:'操作', width:"20%", align:'center', toolbar: '#barDemo'}
            ]],
            id: "user-form"
        });

        //顶部筛选监听
        var $ = layui.$, active = {
            reload: function(){
                //执行重载
                table.reload('user-form', {
                    page: {
                        curr: 1 //重新从第 1 页开始
                    }
                    ,where: {
                        staffName:$("#staffName").val()==""?null:$("#staffName").val(),
                        title:$("#title").val()==""?null:$("#title").val(),
                        isAllot:$("#isAllot").val()=="null"?null:$("#isAllot").val(),
                        isUreplay:$("#isUreplay").val()=="null"?null:$("#isUreplay").val(),
                        isSreplay:$("#isSreplay").val()=="null"?null:$("#isSreplay").val(),
                        isFinish:$("#isFinish").val()=="null"?null:$("#isFinish").val(),
                    }
                }, 'data');
            }
        };

        $('.demoTable .layui-btn').on('click', function(){
            var type = $(this).data('type');
            active[type] ? active[type].call(this) : '';
        });

        $('#state').on('change', function () {
            let state = $(this).val();
            if(state != -1){
                if (state == 0){  //未分配
                    $("#isAllot").val("0");
                    $("#isFinish").val("0");
                }else if(state == 1){ //等待客服答复
                    $("#isAllot").val("1");
                    $("#isUreplay").val("1");
                    $("#isSreplay").val("0");
                    $("#isFinish").val("0");
                }else if(state == 2){// 客服已经答复
                    $("#isAllot").val("1");
                    $("#isUreplay").val("0");
                    $("#isSreplay").val("1");
                    $("#isFinish").val("0");
                }else if(state == 3) { //完结
                    $("#isAllot").val("1");
                    $("#isFinish").val("1");
                    $("#isUreplay").val("null");
                    $("#isSreplay").val("null");
                }
            }else{
                $("#isAllot").val("null");
                $("#isUreplay").val("null");
                $("#isSreplay").val("null");
                $("#isFinish").val("null");
            }

            var type = $(this).data('type');
            active[type] ? active[type].call(this) : '';
        });

        //监听行工具事件
        table.on('tool(test)', function(obj){
            let data = obj.data;
            let id = data.id; //文件id
            let userName = data.user.nickName; //用户

            //console.log(obj)
            if(obj.event === 'check'){
                let orderId = data.id;
                let isAllot = data.isAllot;
                if(isAllot == 1){
                    layer.open({
                        type: 2,
                        title: '回复',
                        shadeClose: true,
                        shade: 0.8,
                        area: ['820px', '760px'],
                        content: '${pageContext.request.contextPath}/userPage/sendInfo.handler?orderId='+orderId,
                    });
                }else{
                    layer.msg('暂无客服,请等待系统安排客服');
                }
            }else if(obj.event === 'upload'){
                let path = data.path;
                if(path != null){
                    let url ="${pageContext.request.contextPath}/file.handler?path="+path;
                    window.open(url);
                }else {
                    layer.msg('该工单未上传附件');
                }
            }else if(obj.event === 'delete'){
                let title = data.title;
                layer.confirm('真的要删除标题为'+ title+'的文件吗', function(index){
                    $.ajax({
                        url: "${pageContext.request.contextPath}/user/delete.handler",
                        data:"oId="+data.id,
                        success:function (data) {
                            if(data.state){
                                obj.del();
                                layer.msg('删除成功，欢迎您的下次光临', {time: 2000, icon:6});
                                layer.close(index);
                            }else {
                                return "404";
                            }
                        }
                    });
                });
            };
        });
    });
</script>
</body>
<%--时间格式转换--%>
<script>
    function dateFormat(fmt, date) {
        let ret;
        const opt = {
            "Y+": date.getFullYear().toString(),        // 年
            "m+": (date.getMonth() + 1).toString(),     // 月
            "d+": date.getDate().toString(),            // 日
            "H+": date.getHours().toString(),           // 时
            "M+": date.getMinutes().toString(),         // 分
            "S+": date.getSeconds().toString()          // 秒
            // 有其他格式化字符需求可以继续添加，必须转化成字符串
        };
        for (let k in opt) {
            ret = new RegExp("(" + k + ")").exec(fmt);
            if (ret) {
                fmt = fmt.replace(ret[1], (ret[1].length == 1) ? (opt[k]) : (opt[k].padStart(ret[1].length, "0")))
            };
        };
        return fmt;
    }
</script>
</html>
